<template>
  <div v-loading="loading">
    <TableSearch
      ref="tableSearch"
      :search-path="searchPath"
      :formItemsInline="formItemsInline"
      :columns="columns"
      :tableData="tableData"
      :tableBtns="tableBtns"
      :form="form"
      @handleTableData="handleTableData"
      @reset="reset"
    >
      <template slot="address">
        <el-form-item>
          <HycAddressCascader ref="area" v-model="area" />
        </el-form-item>
      </template>
      <template slot="date">
        <el-form-item prop="date">
          <SearchDatePicker
            :start.sync="form.startTime"
            :end.sync="form.endTime"
          />
        </el-form-item>
      </template>
    </TableSearch>
    <AddShareDevice
      v-if="addShareDeviceVisible"
      @refreshTable="refreshTable"
      :row="row"
      :visible.sync="addShareDeviceVisible"
    />
    <BatchUpload
      v-if="batchUploadVisible"
      :visible.sync="batchUploadVisible"
      @refreshTable="refreshTable"
      :dialog-type="dialogType"
    ></BatchUpload>
  </div>
</template>

<script>
import TableSearch from '@/components/TableSearch'
import HycAddressCascader from '@/components/hycAddressCascader'
import AddShareDevice from './components/AddShareDevice'
import BatchUpload from './components/BatchUpload'
import { selectProfitSharePage, delProfitShare } from '@/api/divideDevice'
import formatter from '@/utils/format'
export default {
  name: 'DivideAccountsList',
  components: {
    TableSearch,
    HycAddressCascader,
    AddShareDevice,
    BatchUpload,
  },
  data() {
    return {
      loading: true,
      addShareDeviceVisible: false,
      batchUploadVisible: false,
      row: {},
      form: {},
      area: {},
      searchPath: '/web/profitShare-management/profitShare-management/查询',
      formItemsInline: [
        {
          type: 'text',
          value: 'deviceId',
          placeholder: '请输入设备号',
          clearable: true,
        },
        {
          type: 'text',
          value: 'stationName',
          placeholder: '请输入所属电站',
          clearable: true,
        },
        {
          type: 'text',
          value: 'mchName',
          placeholder: '请输入所属运营商',
          clearable: true,
        },
        {
          slot: 'address',
        },
        {
          slot: 'date',
        },
      ],
      tableData: {},
      tableBtns: [
        {
          label: '添加',
          click: this.handleAdd,
          icon: 'el-icon-plus',
          resourceId: '/web/profitShare-management/profitShare-management/添加',
        },
        {
          label: 'Excel批量添加',
          click: () => this.handleBatchUpload('BatchAdd'),
          icon: 'el-icon-plus',
          resourceId:
            '/web/profitShare-management/profitShare-management/批量添加',
        },
        {
          label: '(批量添加模板下载)',
          isDownload: true,
          href: require('../../assets/batchTemplate/批量添加模板.xlsx'),
          fileName: '批量添加模板',
          resourceId:
            '/web/profitShare-management/profitShare-management/批量添加',
        },
        {
          label: 'Excel批量删除',
          click: () => this.handleBatchUpload('BatchDelete'),
          icon: 'el-icon-delete',
          type: 'warning',
          resourceId:
            '/web/profitShare-management/profitShare-management/批量删除',
        },
        {
          label: '(批量删除模板下载)',
          isDownload: true,
          href: require('../../assets/batchTemplate/批量删除模板.xlsx'),
          fileName: '批量删除模板',
          resourceId:
            '/web/profitShare-management/profitShare-management/批量删除',
        },
      ],
      columns: [
        {
          label: '设备号',
          prop: 'deviceId',
          resourceId:
            '/web/profitShare-management/profitShare-management/设备号',
        },
        {
          label: '状态',
          prop: 'online',
          formatter: (row) => {
            return row.online ? '在线' : '失联'
          },
          resourceId: '/web/profitShare-management/profitShare-management/状态',
        },
        {
          label: '所属电站',
          prop: 'stationName',
          resourceId:
            '/web/profitShare-management/profitShare-management/所属电站',
        },
        {
          label: '所属运营商',
          prop: 'userName',
          resourceId:
            '/web/profitShare-management/profitShare-management/所属运营商',
        },
        {
          label: '分账比例',
          prop: 'splitValue',
          formatter: (row) => {
            return row.splitValue ? row.splitValue + '%' : '--'
          },
          resourceId:
            '/web/profitShare-management/profitShare-management/分账比例',
        },
        {
          label: '添加时间',
          prop: 'createTime',
          width: '200px',
          formatter,
          resourceId:
            '/web/profitShare-management/profitShare-management/添加时间',
        },
        {
          label: '操作',
          resourceId: '/web/profitShare-management/profitShare-management/操作',
          buttons: [
            {
              label: '编辑',
              size: 'small',
              click: this.handleEdit,
              resourceId:
                '/web/profitShare-management/profitShare-management/编辑',
            },
            {
              label: '删除',
              size: 'small',
              click: this.handleDel,
              resourceId:
                '/web/profitShare-management/profitShare-management/删除',
            },
          ],
        },
      ],
    }
  },
  async created() {},
  methods: {
    reset() {
      this.form = {}
    },
    handleTableData(params) {
      params = { ...params, ...this.area }
      this.loading = true
      selectProfitSharePage(params).then(
        (res) => {
          this.loading = false
          this.tableData = {
            list: res.list,
            totalCount: res.totalAmount,
          }
        },
        () => {
          this.loading = false
        }
      )
    },
    refreshTable() {
      this.$refs['tableSearch'].refreshTable()
    },
    handleAdd() {
      this.addShareDeviceVisible = true
      this.row = {}
    },
    handleEdit(row) {
      this.addShareDeviceVisible = true
      this.row = row
    },
    handleDel(row) {
      this.$confirm(`您确定要删除设备号${row.deviceId}的设备吗？`, '提示', {
        center: true,
        customClass: 'tip-dialog__wrapper',
      })
        .then(() => {
          delProfitShare({
            id: row.id,
          }).then(() => {
            this.$message({
              message: '删除成功',
              type: 'success',
            })
            this.refreshTable()
          })
        })
        .catch((err) => console.log(err))
    },
    handleBatchUpload(type) {
      this.batchUploadVisible = true
      this.dialogType = type
    },
  },
}
</script>
